<template>
    <div :style="{ width: containerSize.width + 'px', height: containerSize.height + 'px' }">
        <input id="getImg" type="file" @change="fileChange" />
        <div v-if="!imgSrc" class="img-box" @click="triggerFile">
            <el-icon style="color: aqua">
                <Plus />
            </el-icon>
        </div>
        <div v-else>
            <img ref="img" :src="imgSrc" :height="size.imgHeight ? size.imgHeight + 'px' : 'auto'"
                :width="size.imgWidth ? size.imgWidth + 'px' : 'auto'" @load="updateSize" @click="() => imgBig = true">
        </div>

        <div class="imgbig" v-if="imgBig">
            <div @click="() => imgBig = false">
                <el-icon style="color: white;font-size: 40px;cursor: pointer;">
                    <Close />
                </el-icon></div>
            <img :src="imgSrc" alt="">
        </div>

    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, defineExpose } from 'vue'
import { Plus, Close } from "@element-plus/icons-vue";

//从父组件获取尺寸
let size = defineProps({
    width: {
        type: String,
        default: '100'
    },
    height: {
        type: String,
        default: '100'
    },
    imgHeight: {
        type: String
    },
    imgWidth: {
        type: String
    },
    imgUrl: {
        type: Reflect
    }
})
//向父组件传递图片名字
const emit = defineEmits(['getImgName'])

//图片地址
const imgSrc = ref(size.imgUrl ? size.imgUrl : "")
//是否显示大图
const imgBig = ref(false)

// 容器尺寸
const containerSize = ref({
    width: size.width,
    height: size.height
})

//图片的标签
const img = ref(null)

const triggerFile = () => {
    document.getElementById('getImg').click()
}

const fileChange = (e) => {
    let file = e.target.files[0]
    if (file) {
        imgSrc.value = URL.createObjectURL(file)
        console.log(file)
    }
    emit('getImgName', file.name)

    // let reader = new FileReader()
    // reader.readAsDataURL(file)
    // reader.onload = (e) => {
    //     imgSrc.value = e.target.result
    //     hasImg.value = true
    // }
}

const clearImg = () => { 
    imgSrc.value = ""
    containerSize.value = {
        width: size.width,
        height: size.height
    }
    document.getElementById('getImg').value = null
}

//适应图片大小
const updateSize = () => {
    containerSize.value.width = img.value.width
    containerSize.value.height = img.value.height
}


defineExpose({
    fileChange,
    clearImg
})


</script>

<style scoped lang="scss">
input {
    visibility: hidden;
    /* opacity:0; */
    position: absolute;
}

img {
    cursor: pointer;
}

.img-box {
    width: 100%;
    height: 100%;
    background-color: rgb(56, 56, 56);
    border-radius: 5px;
    border: 1px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
} 

.imgbig {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.7);
    display: flex;
    justify-content: center;
    align-items: center;


    div {
        position: fixed;
        top: 20px;
        /* 调整关闭按钮的位置 */
        right: 40px;
    }

    img {
        max-width: 90%;
        /* 确保图片响应式调整 */
        max-height: 90%;
        object-fit: contain;
        /* 保持图片比例 */
    }
}
</style>